﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>2.相对定位position:relative</title>
    <script>
        //relative称为相对定位，如果你给某个元素指定了postion的值为“relative”，那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。
        //使用relative时有几点需要注意：
        //元素设置了relative时，是相对于元素本身位置进行定位；
        //元素设置了relative后，可以通过“T-R-B-L”改变元素当前所在的位置，但元素移位后，同样点有当初的物理空间位；
        //元素设置了relative后，如果没有进行任何的“T-R-B-L”设置，元素不会进行任何位置改变。
        //上面三点第一点和第三点来说都是比较好理解，那么现在针对第二点，我们来看一个实例的操作：
        //在上面的基础上，我们对“div-1”进行向下移动20px；向左移动40px:
        //从效果图可以再次印证上面说的第二点。元素“div-1”向下移动了20px，向左移动了40px，本身位置变化了，而元素最初所占的物理空间依然还是存在，另外一点元素相对定位后并没有影响其他相邻的元素。
    </script>
    <style>
        #example {
            float: right;
        }

        #example p {
                margin: 0 0.25em;
                padding: 0.25em 0;
        }

        #div-before,
        #div-after {
            background-color: #88d;
            color: #000;
        }

        #div-1 {
            width: 400px;
            background-color: #000;
            color: #fff;
        }

        #div-1-padding {
            padding: 10px;
        }

        #div-1a {
            background-color: #d33;
            color: #fff;
        }

        #div-1b {
            background-color: #3d3;
            color: #fff;
        }

        #div-1c {
            background-color: #33d;
            color: #fff;
        }

        #div-1 {
            position: relative;
            top: 20px;
            left: -40px;
        }
    </style>
</head>
<body>
    <div id="example">
        <div id="div-before">
            <p>id = div-before</p>
        </div>
        <div id="div-1">
            <div id="div-1-padding">
                <p>id = div-1</p>
                <div id="div-1a">
                    <p>id = div-1a</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
                </div>
                <div id="div-1b">
                    <p>id = div-1b</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
                </div>
                <div id="div-1c">
                    <p>id = div-1c</p>
                </div>
            </div>
        </div>
        <div id="div-after">
            <p>id = div-after</p>
        </div>
    </div>
</body>
</html>